<template>
  <div>
    <el-container style="height: 100vh; background-color: #f5f5f5;">
      <el-header style="background-color: #ff6a00; color: white; text-align: center;">
        <h2>个人中心</h2>
      </el-header>
      <el-main>
        <div class="profile-container">
          <div class="profile-header">
            <h3 v-if="userInfo.userName">{{ userInfo.userName }}</h3>
          </div>
          <div class="profile-stats">
            <div class="stat-item">
              <h4>余额</h4>
              <p>{{ userInfo.userBalance }}</p>
              <el-popover :visible="payFlag" placement="top" :width="160">
                <p>请输入充值金额</p>
                <el-input v-model="payForm.amount" type="txt" placeholder="金额"></el-input>
                <div style="text-align: right; margin: 0">
                  <el-button size="small" text @click="payFlag = false">取消</el-button>
                  <el-button size="small" type="primary" @click="payFunction()">
                    确定
                  </el-button>
                </div>
                <template #reference>
                  <el-button @click="payFlag = true">充值</el-button>
                </template>
              </el-popover>
            </div>
            <div class="stat-item">
              <h4>购物车</h4>
              <a href="/commodity">{{ userShopCar.total }}</a>
            </div>
            <div class="stat-item">
              <h4>商品收藏夹</h4>
              <a href="">{{ userCollection.total }}</a>
            </div>
            <div class="stat-item">
              <h4>我的积分</h4>
              <a href="">{{ userInfo.userIntegral }}</a>
            </div>
          </div>
          <div class="my-items">
            <h3>我的爱车</h3>
            <h6>管理</h6>
            <div v-for="car in userCar.records" :key="car.carId">
              <el-card class="car-card" shadow="hover">
                <div class="car-info">
                  <img :src="car.carImage || 'https://via.placeholder.com/100'" alt="Car Image" />
                  <div class="car-details">
                    <h4>{{ car.model }} {{ car.sub_types }}</h4>
                    <p>车牌号: {{ car.licensePlate }}</p>
                    <p>颜色: {{ car.carColor }}</p>
                    <p>里程: {{ car.mileage }} km</p>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
          <div class="my-orders">
            <h3>我的商品订单</h3>
            <el-card class="order-card" shadow="hover">
              <el-row>
                <el-col :span="6">
                  <div class="stat-item">
                    <h4>待付款</h4>
                    <p @click="showNoPayDetailFlag = true">{{ userProductNopay.total }}</p>
                  </div>
                  <!-- 未付款订单详情弹窗 -->
                  <el-dialog v-model="showNoPayDetailFlag" title="未付款订单详情">
                    <div v-if="userProductNopay.list">
                      <div v-for="order in userProductNopay.list" :key="order.commodityId">
                        <p>订单号: {{ order.commodityId }}</p>
                        <p>收件人: {{ order.receiverName }}</p>
                        <p>电话: {{ order.receiverPhone }}</p>
                        <p>支付状态:{{ chekPayState(order.paymentStatus) }}</p>
                        <p>优惠券:{{ order.couponId }}</p>
                        <p>满减:{{ order.fullReduction }}</p>
                        <p>折扣:{{ order.discount }}</p>
                        <p>总价: {{ order.total }}</p>
                        <p>折后金额:{{order.discountedPrices}}</p>
                        <el-button type="primary" @click="placeOrder(order)">支付</el-button>
                        <hr />
                      </div>
                    </div>
                    <div v-else>
                      <p>没有未付款订单</p>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="showNoPayDetailFlag = false">关闭</el-button>
                    </span>
                  </el-dialog>





                </el-col>
                <el-col :span="6">
                  <div class="stat-item">
                    <h4>待发货</h4>
                    <p @click="showWaitUseDetailFlag = true">{{ userProductWaitUse.total }}</p>
                  </div>
                  <!-- 待发货订单详情弹窗 -->
                  <el-dialog v-model="showWaitUseDetailFlag" title="待发货订单详情">
                    <div v-if="userProductWaitUse.list">
                      <div v-for="order in userProductWaitUse.list" :key="order.commodityId">
                        <p>订单号: {{ order.commodityId }}</p>
                        <p>收件人: {{ order.receiverName }}</p>
                        <p>电话: {{ order.receiverPhone }}</p>
                        <p>支付状态:{{ chekPayState(order.paymentStatus) }}</p>
                        <p>优惠券:{{ order.couponId }}</p>
                        <p>满减:{{ order.fullReduction }}</p>
                        <p>折扣:{{ order.discount }}</p>
                        <p>总价: {{ order.total }}</p>
                        <p>折后金额:{{order.discountedPrices}}</p>
                        <hr />
                      </div>
                    </div>
                    <div v-else>
                      <p>没有待发货订单</p>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="showWaitUseDetailFlag = false">关闭</el-button>
                    </span>
                  </el-dialog>



                </el-col>
                <el-col :span="6">
                  <div class="stat-item">
                    <h4>进行中</h4>
                    <p @click="showInUseDetailFlag = true">{{ userProductInUse.total }}</p>
                  </div>
                  <!-- 进行中订单详情弹窗 -->
                  <el-dialog v-model="showInUseDetailFlag" title="进行中订单详情">
                    <div v-if="userProductInUse.list">
                      <div v-for="order in userProductInUse.list" :key="order.commodityId">
                        <p>订单号: {{ order.commodityId }}</p>
                        <p>收件人: {{ order.receiverName }}</p>
                        <p>电话: {{ order.receiverPhone }}</p>
                        <p>支付状态:{{ chekPayState(order.paymentStatus) }}</p>
                        <p>优惠券:{{ order.couponId }}</p>
                        <p>满减:{{ order.fullReduction }}</p>
                        <p>折扣:{{ order.discount }}</p>
                        <p>总价: {{ order.total }}</p>
                        <p>折后金额:{{order.discountedPrices}}</p>
                        <el-button type="primary" @click="confirmProduceOrder(order)">确认收货</el-button>
                        <hr />
                      </div>
                    </div>
                    <div v-else>
                      <p>进行中付款订单</p>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="showInUseDetailFlag = false">关闭</el-button>
                    </span>
                  </el-dialog>
                </el-col>
                <!-- <el-col :span="5">
                  <div class="stat-item">
                    <h4>待评价</h4>
                    <a href="">{{ userShopCar.total }}</a>
                  </div>
                </el-col> -->
                <el-col :span="6">
                  <div class="stat-item">
                    <h4>已完成</h4>
                    <p @click="showFinishedDetailFlag = true">{{ userProductFinished.total }}</p>
                  </div>

                  <!-- 已完成订单详情弹窗 -->
                  <el-dialog v-model="showFinishedDetailFlag" title="已完成订单详情">
                    <div v-if="userProductFinished.list">
                      <div v-for="order in userProductFinished.list" :key="order.commodityId">
                        <p>订单号: {{ order.commodityId }}</p>
                        <p>收件人: {{ order.receiverName }}</p>
                        <p>电话: {{ order.receiverPhone }}</p>
                        <p>支付状态:{{ chekPayState(order.paymentStatus) }}</p>
                        <p>优惠券:{{ order.couponId }}</p>
                        <p>满减:{{ order.fullReduction }}</p>
                        <p>折扣:{{ order.discount }}</p>
                        <p>总价: {{ order.total }}</p>
                        <p>折后金额:{{order.discountedPrices}}</p>
                        <el-button type="primary" @click="Refund(order)">退款</el-button>
                        <hr />
                      </div>
                    </div>
                    <div v-else>
                      <p>没有已完成订单</p>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="showFinishedDetailFlag = false">关闭</el-button>
                    </span>
                  </el-dialog>
                </el-col>
              </el-row>
            </el-card>
          </div>
          <div class="my-orders">
            <h3>我的服务订单</h3>
            <el-card class="order-card" shadow="hover">
              <el-row>
                <el-col :span="5">
                  <div class="stat-item">
                    <h4>待付款</h4>
                    <p @click="showServiceNoPayFlag = true">{{ userServiceNopay.total }}</p>
                  </div>

                  <!-- 待付款订单详情弹窗 -->
                  <el-dialog v-model="showServiceNoPayFlag" title="待付款订单详情">
                    <div v-if="userServiceNopay.list">
                      <div v-for="order in userServiceNopay.list" :key="order.orderId">
                        <p>订单号: {{ order.orderId }}</p>
                        <p>服务详情: {{ order.serviceDetail }}</p>
                        <p>支付价格: {{ order.totalAmount }}</p>
                        <p>预约时间: {{ order.appointmentTime }}</p>
                        <p>支付状态: {{ chekPayState(order.payStatus) }}</p>
                        <p>订单状态:{{ order.orderState }}</p>
                        <p>备注:{{ order.remark }}</p>
                        <el-button type="primary" @click="payServiceOrder(order)">支付</el-button>
                        <hr />

                      </div>
                    </div>
                    <div v-else>
                      <p>没有待付款订单</p>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="showServiceNoPayFlag = false">关闭</el-button>
                    </span>
                  </el-dialog>


                </el-col>
                <el-col :span="5">
                  <div class="stat-item">
                    <h4>待使用</h4>
                    <p @click="showServiceWaitUseFlag = true">{{ userServiceWaitUse.total }}</p>
                  </div>

                  <!-- 待使用订单详情弹窗 -->
                  <el-dialog v-model="showServiceWaitUseFlag" title="待使用订单详情">
                    <div v-if="userServiceWaitUse.list">
                      <div v-for="order in userServiceWaitUse.list" :key="order.orderId">
                        <p>订单号: {{ order.orderId }}</p>
                        <p>服务详情: {{ order.serviceDetail }}</p>
                        <p>支付价格: {{ order.totalAmount }}</p>
                        <p>预约时间: {{ order.appointmentTime }}</p>
                        <p>支付状态: {{ chekPayState(order.payStatus) }}</p>
                        <p>订单状态:{{ order.orderState }}</p>
                        <p>备注:{{ order.remark }}</p>
                        <el-button type="primary" @click="rufOrder(order)">退款</el-button>
                        <el-button type="primary" @click="useOrder(order.orderId)">使用</el-button>
                        <hr />
                      </div>
                    </div>
                    <div v-else>
                      <p>没有待使用订单</p>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="showServiceWaitUseFlag = false">关闭</el-button>
                    </span>
                  </el-dialog>
                </el-col>
                <el-col :span="5">
                  <div class="stat-item">
                    <h4>进行中</h4>
                    <P @click="showServiceInUseFlag = true">{{ userServiceInUse.total }}</p>
                  </div>
                  <!-- 进行中订单详情弹窗 -->
                  <el-dialog v-model="showServiceInUseFlag" title="进行中订单详情">
                    <div v-if="userServiceInUse.list">
                      <div v-for="order in userServiceInUse.list" :key="order.orderId">
                        <p>订单号: {{ order.orderId }}</p>
                        <p>服务详情: {{ order.serviceDetail }}</p>
                        <p>支付价格: {{ order.totalAmount }}</p>
                        <p>预约时间: {{ order.appointmentTime }}</p>
                        <p>支付状态: {{ chekPayState(order.payStatus) }}</p>
                        <p>订单状态:{{ order.orderState }}</p>
                        <p>备注:{{ order.remark }}</p>
                        <el-botton type="primary" @click="findOrderProcesses(order.orderId)">查看订单跟踪进程</el-botton><br/>
                        <el-botton type="primary" @click="confirmProduceOrder(order.orderId)">完成订单</el-botton>
                        <hr />
                      </div>
                    </div>
                    
                    <div v-else>
                      <p>没有进行中订单</p>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="showServiceNoPayFlag = false">关闭</el-button>
                    </span>
                  </el-dialog>
                </el-col>
                <el-col :span="5">
                  <div class="stat-item">
                    <h4>待评价</h4>
                    <p @click="showServiceEvaluateFlag=true">{{ userServiceEvaluate.total }}</p>
                  </div>
                                    <!-- 进行中订单详情弹窗 -->
                                    <el-dialog v-model="showServiceEvaluateFlag" title="待评价订单详情">
                    <div v-if="userServiceEvaluate.list">
                      <div v-for="order in userServiceEvaluate.list" :key="order.orderId">
                        <p>订单号: {{ order.orderId }}</p>
                        <p>服务详情: {{ order.serviceDetail }}</p>
                        <p>支付价格: {{ order.totalAmount }}</p>
                        <p>预约时间: {{ order.appointmentTime }}</p>
                        <p>支付状态: {{ chekPayState(order.payStatus) }}</p>
                        <p>订单状态:{{ order.orderState }}</p>
                        <p>备注:{{ order.remark }}</p>
                        <el-botton type="primary" @click="evaluate(order.orderId)">评价</el-botton>
                        <hr />
                      </div>
                    </div>
                    <div v-else>
                      <p>没有待评价订单</p>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="showServiceEvaluateFlag = false">关闭</el-button>
                    </span>
                  </el-dialog>
                </el-col>
                <el-col :span="4">
                  <div class="stat-item">
                    <h4>已完成</h4>
                    <p @click="showServiceFinishedFlag=true">{{ userServiceFinished.total }}</p>
                  </div>
                                    <!-- 进行中订单详情弹窗 -->
                                    <el-dialog v-model="showServiceFinishedFlag" title="已完成订单详情">
                    <div v-if="userServiceFinished.list">
                      <div v-for="order in userServiceFinished.list" :key="order.orderId">
                        <p>订单号: {{ order.orderId }}</p>
                        <p>服务详情: {{ order.serviceDetail }}</p>
                        <p>支付价格: {{ order.totalAmount }}</p>
                        <p>预约时间: {{ order.appointmentTime }}</p>
                        <p>支付状态: {{ chekPayState(order.payStatus) }}</p>
                        <p>订单状态:{{ order.orderState }}</p>
                        <p>备注:{{ order.remark }}</p>
                        <hr />
                      </div>
                    </div>
                    <div v-else>
                      <p>没有已完成订单</p>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="showServiceFinishedFlag = false">关闭</el-button>
                    </span>
                  </el-dialog>
                </el-col>
              </el-row>
            </el-card>
          </div>
          <!-- <div class="car-owner-services">
            <h3>车主服务</h3>
            <el-card class="service-card" shadow="hover">
              <el-row>
                <el-col :span="8">快速查询</el-col>
                <el-col :span="8">救援拖车</el-col>
                <el-col :span="8">车辆检测</el-col>
              </el-row>
              <el-row>
                <el-col :span="8">爱车估价</el-col>
                <el-col :span="8">保障服务</el-col>
                <el-col :span="8">会员中心</el-col>
              </el-row>
            </el-card>
          </div> -->
          <el-dialog v-model="findOrderProcessesFlag" title="进行中订单详情">
            <div v-if="inUse.length > 0">
          <div v-for="order in inUse" :key="order.orderId" class="order-item">
            <p>订单号: {{ order.orderId }}</p>
        <p>当前状态: {{ order.currentStatus }}</p>
        <p>下一个状态: {{ order.nextStatus }}</p>
        <p>已用时: {{order.transitionTime}}</p>
        <p>描述: {{ order.transitionReason }}</p>
        <p>预计需要用时: {{ order.expectedDuration }}</p>
        <hr />
      </div>
    </div>
                    
                    <div v-else>
                      <p>没有进程记录</p>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="findOrderProcessesFlag = false">关闭</el-button>
                    </span>
                  </el-dialog>
          <h3>猜你喜欢</h3>
          <el-card class="recommendation-card" shadow="hover">
            <el-row>
              <el-col v-for="product in userCollection.list" :key="product.productId" :span="8">
                <img :src="product.picture || 'https://via.placeholder.com/100'" alt="Product Image" />
                <h4>商品名称:{{ product.productName }}</h4>
                <p>价格: {{ product.productPrice }}</p>
                <p>{{ product.describe }}</p>
                <a href="/producttable" class="btn btn-primary">去商城看看</a>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-main>
    </el-container>






    <el-dialog
        v-model="isShow1"
        title="确认支付？"
        width="500"
        
      >
        <span>
            <p>确认支付？</p>
            <p>订单编号：{{PayForm.commodityId}}</p>
            <p>订单金额：{{PayForm.amount}}</p>
        </span>

      
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isShow1 = false">取消</el-button>
        <el-button @click="pay">确认支付</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
        v-model="isShow2"
        title="确认退款？"
        width="500"
        
      >
        <span>
            <p>确认退款？</p>
            <p>订单编号：{{RefundForm.commodityId}}</p>
            <p>订单金额：{{RefundForm.amount}}</p>
        </span>

      
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isShow2 = false">取消</el-button>
        <el-button @click="pays">确认退款</el-button>
      </div>
    </template>
  </el-dialog>





  <el-dialog
        v-model="isShow3"
        title="确认支付？"
        width="500"
        
      >
        <span>
            <p>确认支付？</p>
            <p>订单编号：{{OrderPayForm.orderId}}</p>
            <p>订单金额：{{OrderPayForm.totalAmount}}</p>
        </span>

      
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isShow3 = false">取消</el-button>
        <el-button @click="orderpay">确认支付</el-button>
      </div>
    </template>
  </el-dialog>








  <div v-if="payUrl">
          <p>付款链接已生成：</p >
          <a :href="payUrl" target="_blank">{{ payUrl }}</a >
        </div>


        <div v-if="payUrls">
          <p>付款链接已生成：</p >
          <a :href="payUrls" target="_blank">{{ payUrls }}</a >
        </div>



        <div v-if="refundUrl">
          <p>退款链接已生成：</p >
          <a :href="refundUrl" target="_blank">{{ refundUrl }}</a >
        </div>
  </div>
</template>

<script>
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import { ElContainer, ElHeader, ElMain, ElCard, ElRow, ElCol } from 'element-plus';


export default {
  components: {
    ElContainer,
    ElHeader,
    ElMain,
    ElCard,
    ElRow,
    ElCol,
  },
  name: 'UserProfile',
  data() {
    return {
      inUse:[],
      findOrderProcessesFlag:false,
      showNoPayDetailFlag: false,
      showWaitUseDetailFlag: false,
      showInUseDetailFlag: false,
      showFinishedDetailFlag: false,
      showServiceNoPayFlag: false,
      showServiceWaitUseFlag: false,
      showServiceInUseFlag: false,
      showServiceFinishedFlag: false,
      showServiceEvaluateFlag: false,
      payFlag: false,
      userInfo: {
        userName: '',
        userBalance: 0,
        userIntegral: 0,
      },
      userCar: {},
      findUserCarForm: {},
      userCollection: {},
      userShopCar: {},
      payForm: {
        amount: 0,
      },
      userServiceOrder: {},
      userProductOrder: {},
      userServiceNopay: {},
      userServiceWaitUse: {},
      userServiceInUse: {},
      userServiceFinished: {},
      userServiceEvaluate: {},
      userProductNopay: {},
      userProductWaitUse: {},
      userProductInUse: {},
      userProductFinished: {},
      userProductEvaluate: {},
      userOrderForm:{},
      evaluatForm:{},
      isShow1: false,
      PayForm:{
            amount:0,
            commodityId:""
          },
          payUrl: "", // 生成的付款链接
          payUrls:"",
          refundUrl:"",
          RefundForm:{
            amount:0,
            commodityId:""
          },
          isShow2:false,
          OrderPayForm:{
            totalAmount:0,
            orderId:""
          },
          isShow3:false,




    };
  },
  methods: {
    rufOrder(){

    },
    orderpay(){
      this.$http.post('/order/order/orderpay',this.OrderPayForm).then(resp=>{
         // 将响应数据中的"data"属性值写入到文档中
            document.write(resp.data.data)
          })
    },


    payServiceOrder(obj){
     this.OrderPayForm.orderId=obj.orderId;
     this.OrderPayForm.totalAmount=obj.totalAmount;
            console.log(this.OrderPayForm);
            this.isShow3 = true;

    },

    pays(){
            this.$http.post('/order/commodity/refund',this.RefundForm).then(resp=>{
           // 将响应数据中的"data"属性值写入到文档中
              document.write(resp.data.data)
            })
          },
        Refund(obj){
            this.RefundForm.commodityId = obj.commodityId;
            this.RefundForm.amount = obj.discountedPrices;
            console.log(this.RefundForm);
            this.isShow2 = true;
        },


    pay(){
          
          this.$http.post('/order/commodity/create',this.PayForm).then(resp=>{
         // 将响应数据中的"data"属性值写入到文档中
            document.write(resp.data.data)
          })
        },
    placeOrder(obj){
            this.PayForm.commodityId = obj.commodityId;
            this.PayForm.amount = obj.discountedPrices;
            console.log(this.PayForm);
            this.isShow1 = true;


        },


    useOrder(orderId) {
  this.userOrderForm.orderId=orderId;
  this.userOrderForm.role="车主";
  this.userOrderForm.location="默认门店";
  this.userOrderForm.realname="车主姓名";
  this.userOrderForm.phone= "车主电话";
  this.$http.post("/order/offlineCheck/addNewOfflineCheck", this.userOrderForm, {
  }).then(resp => {
    this.$message(resp.data.message);
  }).catch(error => {
    console.error("请求失败:", error);
    this.$message.error("请求失败，请重试。");
  });
},
    //评价服务订单
    evaluate(orderId) {
  const evaluatForm = new FormData();
  this.evaluatForm.orderId=orderId;
  this.evaluatForm.rating= 5;
  this.evaluatForm.evaluate="好";

  this.$http.put("/order/order/evaluateOrderUser", this.evaluatForm, {

  }).then(resp => {
    this.$message(resp.data.message);
  }).catch(error => {
    console.error("请求失败:", error);
    this.$message.error("请求失败，请重试。");
  });
},
    findOrderProcesses(orderId){
      
      this.$http.get("/order/orderProgress/getOrderProgress",{params:{orderId}}).then(resp=>{
        this.inUse=resp.data.data;
        console.log(this.inUse);
      })
      this.findOrderProcessesFlag=true;
    },
    confirmProduceOrder(orderId){
      //确认逻辑
      let data =new FormData()
      data.append("orderId",orderId);
      this.$http.put("/order/order/confirmOrderUser",data).then(resp=>{
        this.$message(resp.data.message)
      })
    },
    //支付
    payProductOrder(order){
      this.$http.put().then(resp=>{

      })
      //支付逻辑
    },
    chekPayState(status){
      if(status==1)return "已支付"
      if(status==0)return "未支付"
    },
    payFunction() {
      this.$http.post("/user/userInfo/create", this.payForm).then(res => {
        document.write(res.data.data)
      });
    },
    getUserInfo() {
      this.$http.post("/user/userInfo/getUserInfo")
        .then(res => {
          this.userInfo = res.data.data;
        })
        .catch(err => {
          console.error("获取用户信息失败:", err);
        });
    },
    getUserCar() {
      this.$http.post("/car/carInfo/selectcarinfo", this.findUserCarForm)
        .then(res => {
          this.userCar = res.data.data;
          console.log(res.data.data);
        })
        .catch(err => {
          console.error("获取用户爱车信息失败:", err);
        });
    },
    getUserCollect() {
      this.$http.get("/product/productTable/findUserCollectUser")
        .then(res => {
          this.userCollection = res.data.data;
          if (this.userCollection.length > 0) {

          } else {
            getSystemCollect();
          }
        })
        .catch(err => {
        });
    },
    getSystemCollect() {
      this.$http.get("/product/productTable/findSystemCollect")
        .then(res => {
          this.userCollection = res.data.data;
          console.log(res.data.data);
        })
        .catch(err => {
        });
    },
    getUserShopCar() {
      this.$http.get("/product/productTable/findAllShoppingCarByUserId")
        .then(res => {
          this.userShopCar = res.data.data;
        })
        .catch(err => { });
    },
    findServiceOrder() {
      this.$http.get("/order/order/getOrderListUser").then(res => {
        this.userServiceOrder = res.data.data;
      });
    },
    findProductOrder() {
      this.$http.get("/order/order/getOrderListProduct").then(res => {
        this.userProductOrder = res.data.data;
      });
    },
    findServiceNopay() {
      this.$http.get("/order/order/getNoPay").then(res => {
        this.userServiceNopay = res.data.data;
      });
    },
    findServiceWaitUse() {
      this.$http.get("/order/order/getWaitUse").then(res => {
        this.userServiceWaitUse = res.data.data;
      });
    },
    findServiceInUse() {
      this.$http.get("/order/order/getInUse").then(res => {
        this.userServiceInUse = res.data.data;
      });
    },
    findServiceFinish() {
      this.$http.get("/order/order/getFinished").then(res => {
        this.userServiceFinished = res.data.data;
      });
    },
    findServiceEvaluate() {
      this.$http.get("/order/order/getWaitEvaluate").then(res => {
        this.userServiceEvaluate = res.data.data;
      });
    },
    findProductNopay() {
      this.$http.get("/order/commodity/getNoPay").then(res => {
        this.userProductNopay = res.data.data;
      });
    },
    findProductWaitUse() {
      this.$http.get("/order/commodity/getWaitUse").then(res => {
        this.userProductWaitUse = res.data.data;
      });
    },
    findProductInUse() {
      this.$http.get("/order/commodity/getInUse").then(res => {
        this.userProductInUse = res.data.data;
      });
    },
    findProductFinish() {
      this.$http.get("/order/commodity/getFinished").then(res => {
        this.userProductFinished = res.data.data;
      });
    },
    // findProductEvaluate(){
    //   this.$http.get("/order/commodity/getWaitEvaluate").then(res => {
    //     this.userServiceEvaluate = res.data.data;
    //   });
    // },
    load() {
      this.findServiceInUse();
      this.findServiceFinish();
      this.findServiceEvaluate();
      this.findServiceNopay();
      this.findServiceWaitUse();
      this.findProductInUse();
      this.findProductFinish();
      // this.findProductEvaluate();
      this.findProductNopay();
      this.findProductWaitUse();

    }
  },
  created() {
    this.getUserInfo();
    this.getUserCar();
    this.getUserCollect();
    this.getUserShopCar();
    this.findServiceOrder();
    this.load();
  },
}
</script>

<style scoped>
.profile-container {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.profile-header {
  text-align: center;
  margin-bottom: 20px;
}

.profile-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
}

.my-items,
.my-orders,
.car-owner-services {
  margin-top: 20px;
}

.car-card,
.order-card,
.service-card,
.recommendation-card {
  margin-top: 10px;
}

.car-info {
  display: flex;
  align-items: center;
}

.car-details {
  margin-left: 10px;
}
</style>